<!DOCTYPE html>
<html lang="en">

<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/css/resourcedeiails.css">
    <script src="static/js/vue.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>
    <title>资源详情</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        pre:has(> code[class*="language-"]) {
            background: #f5f2f0;
            padding: 1em;
            margin: .5em 0;
            overflow: auto;

            color: black;
            text-shadow: 0 1px white;
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
            font-size: 1em;
            text-align: left;
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.5;

            tab-size: 4;

            -webkit-hyphens: none;
            hyphens: none;
        }
        code[class*="language-"]{
            background: #f5f2f0;

            color: black;
            text-shadow: 0 1px white;
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
            font-size: 1em;
            text-align: left;
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.5;

            tab-size: 4;

            -webkit-hyphens: none;
            hyphens: none;
        }

        body {
            margin: 0;
            overflow: hidden;
        }
        .background-iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* 在其他内容后面 */
            border: none;
        }
        .wrapper {
            max-height: 3em; /* 初始高度 */
            overflow: hidden !important;
            position: relative;
        }
        .wrapper.full {
            max-height: initial; /* 展开后高度 */
            overflow: auto !important;
        }
        .text-sm{
            color: #a1a1a8;
        }
    </style>
</head>

<body style="width: 100%;height: 100%;overflow: hidden;">
<iframe src="goto/background.ftl" class="background-iframe"></iframe>
<div style="width: 100%;">
    <div id="headerDiv" style="position: fixed;width: 100%;">
        <header>
            <img src="static/images/logo.png" id="logo" style="float: left;" alt="梦寒君资源">
            <h1 id="title">梦寒君资源分享</h1>
        </header>
    </div>
</div>
<div id="topDiv"></div>
<div class="container" id="container">
    <div id="resourcesdiv" style="background-color: #fff">
        <div class="free-resources">
            <div class="resources">
                <div class="resource" id="resource">
                    <#--<div style="width: 100%;text-align: center;"><h2>{{resource.title}}</h2></div>-->
                    <h2 class="text-lg font-bold mt-2" style="color: #3c3d3e;">{{resource.title}}</h2>
                    <p class="text-sm">发布者：{{resource.uploaderName}}<i class="el-icon-wallet" style="margin-left:20px"></i>类型：{{resource.type}} <i class="el-icon-time" style="margin-left:20px"></i>{{resource.createdAt}}<i class="el-icon-view" style="margin-left:20px"></i>{{resource.clickCount}}</p>
                    <hr/>
                    <div style="padding: 20px" v-html="resource.description">

                    </div>
                </div>
            </div>
        </div>
    </div>


</div>


</body>
<script>
    var username = localStorage.getItem("username");
    var token = localStorage.getItem("token");
    var userid = localStorage.getItem("userid");
    var searchParams = new URLSearchParams(window.location.search);
    var resid = searchParams.get('resid').toString();

    new Vue({
        el:'#resourcesdiv',
        data:{
            resource:{
                "title": null,
                "description": null,
                "type": null,
                "uploaderId": null,
                "level": null,
                "createdAt": null,
                "cover": null,
                "uploaderName": null,
                "clickCount":null
            }
        },
        methods:{
            init(){
                axios.get('resources/getResourceById?resourceId='+resid,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        var data = resp.data.data;
                        this.resource.title = data.title;
                        this.resource.description = data.description;
                        this.resource.type = data.type;
                        this.resource.uploaderId = data.uploaderId;
                        this.resource.level = data.level;
                        this.resource.createdAt = data.createdAt;
                        this.resource.cover = data.cover;
                        this.resource.uploaderName = data.uploaderName;
                        this.resource.clickCount = data.clickCount;

                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            /**
             * 展开p标签
             */
            expand() {
                var wrapper = document.getElementById('wrapper');
                wrapper.classList.add('full');
            }

        },
        created() {
            this.init()
        },
        updated(){
            var topHeight = document.getElementById('headerDiv').offsetHeight;
            document.getElementById('topDiv').style.height = topHeight+'px';
            if(isMobileDevice()){
                document.getElementById("container").style.height = (screenHeight-topHeight)+'px';
            }

            // 获取所有的 <pre> 元素
            var pres = document.getElementsByTagName('pre');
            // 遍历所有的 <pre> 元素
            for (var i = 0; i < pres.length; i++) {
                var code = pres[i].getElementsByTagName('code'); // 查找当前 <pre> 下的 <code> 元素
                if (code.length > 0) { // 如果找到了 <code> 元素
                    pres[i].classList.add('wrapper'); // 为包含 <code> 的 <pre> 添加样式类
                    pres[i].addEventListener('click',function (){
                        this.classList.add('full');
                    })
                }
            }
        }
    })



    // 检测用户是否使用移动设备
    function isMobileDevice() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    var screenHeight = window.innerHeight;
    // 如果是移动设备，则调整 div 的 padding
    if (isMobileDevice()) {
        /* // 获取图片元素
        var img = document.getElementById('logo');
        // 设置图片高度为200像素
        img.style.height = "10%"; */
        document.getElementById("title").style.display = "none";
        //document.getElementById("content").style.width = "60%";
        document.getElementById("container").style.paddingRight = "0%"
        document.getElementById("container").style.paddingLeft = "0%"
    }else{
        document.getElementById("container").style.maxHeight = "500px"
    }

</script>

</html>
